const { useState, useEffect } = React;
const { Button, Flex, Rate, Space, Modal, Input, Tag, List, Select } = antd;



function PtIndex() {
  const [data, setData] = useState([]);
  const [visible, setVisible] = useState(false);
  const [currentData, setCurrentData] = useState(null);

  const loadData = () => db.prompts.toArray().then(setData);

  useEffect(() => { loadData() }, []);

  const handleSave = async (values) => {
    if (currentData?.id) {
      await db.prompts.update(currentData.id, values);
    } else {
      await db.prompts.add(values);
    }
    setVisible(false);
    loadData();
  };

  return (
    <div style={{ padding: 24 }}>
      <Button 
        type="primary" 
        style={{ marginBottom: 16 }}
        onClick={() => {
          setCurrentData(null);
          setVisible(true);
        }}
      >
        新建提示词
      </Button>
      
      <PtList 
        data={data}
        onEdit={(record) => {
          setCurrentData(record);
          setVisible(true);
        }}
        onDelete={id => db.prompts.delete(id).then(loadData)}
      />
      
      <PtForm
        visible={visible}
        data={currentData}
        onCancel={() => setVisible(false)}
        onSave={handleSave}
      />
    </div>
  );
}

